<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div>
          Text Summerizer
          <br>
          自动文本摘要------严宋扬 3120105333
        </div>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <div>
              <el-input
                v-model="text"
                :autosize="{ minRows: 10, maxRows: 30 }"
                type="textarea"
                placeholder="Please input an article"
              />
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              <el-button type="primary" @click="onSubmit">Summerize</el-button>
              <br>
              <br>
              <el-button type="primary" @click="onRandom">Random Article</el-button>
              <!-- <p v-if="waiting">
                点击以进行摘要
              </p>
              <P v-else>
                耗时 s
              </P> -->
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-input
                v-model="result"
                :autosize="{ minRows: 2, maxRows: 10 }"
                type="textarea"
                placeholder="Result will show up here!"
              />
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
/* eslint-disable */

import { onMounted, ref } from "vue";
const axios = require("axios").default;
let text = ref("");
let result = ref("");

const onSubmit = () => {
  const json = JSON.stringify({ content: text.value });
  axios
    .post("http://localhost:8000/texts/summarize", json, {
      headers: {
        // Overwrite Axios's automatically set Content-Type
        "Content-Type": "application/json",
      },
    })
    .then(function (response) {
      result.value = response.data.abstract;
      console.log(response.data.abstract);
      console.log(result.value);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
      // always executed
    });
};

const onRandom = () => {
    axios.get('http://localhost:8000/texts/random')
      .then(function (response) {
        // handle success
        text.value = response.data.content
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
        // always executed
      });

}

</script>

<script>
export default {
  name: "App"
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
